<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="五邑臻选,严选,五邑优选,五邑甄选,五邑优品,五邑精选,甄选家,严选态度" />
  <meta name="description" content="五邑臻选秉承五邑一贯的严谨态度，深入世界各地，严格把关所有商品的产地、工艺、原材料，甄选居家、厨房、饮食等各类商品，力求给你最优质的商品。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五邑臻选 - 以严谨的态度，为中国消费者甄选天下优品</title>
  <link rel="shortcut icon" href="./images/logo2.png" type="image/x-icon" />
  <!-- 公共样式CSS -->
  <link rel="stylesheet" href="./css/common.css">
  <!-- 首页样式 -->
  <link rel="stylesheet" href="./css/cart.css">
  <link rel="stylesheet" href="./css/vip.css">
</head>
<style>/* 购物车结算容器 */
  .m-cart {
      padding: 20px;            /* 设置容器的内边距，控制上下左右的空间 */
      background-color: #fff;   /* 背景色，方便区分 */
      border: 1px solid #ddd;   /* 边框 */
      height: auto;             /* 高度自适应 */
      min-height: 400px;        /* 最小高度为 400px，确保容器至少有这个高度 */
  }
  
  /* 居中内容 */
  .m-cart .center {
      max-width: 1200px;        /* 最大宽度限制 */
      margin: 0 auto;           /* 居中容器 */
  }
  
  /* 购物车详情区域 */
  .c-detail {
      margin-bottom: 20px;      /* 购物车商品详情部分与其他部分的间距 */
  }
  
  /* 购物车合计区域 */
  .cart-total {
      padding-top: 20px;        /* 顶部的内边距 */
      background-color: #f9f9f9; /* 背景色，区分合计区域 */
      border-top: 1px solid #ddd; /* 合计区域与商品列表之间的边框 */
  }
  
  /* 结算按钮区域 */
  .cart-total .total {
      display: flex;
      justify-content: space-between;  /* 使合计和按钮两侧对齐 */
      align-items: center;             /* 垂直居中 */
      padding: 10px 0;
  }
  
  .submit {
      display: inline-block;
      padding: 10px 20px;
      background-color: #ff5e00;      /* 设置提交按钮的背景颜色 */
      color: white;                   /* 按钮文字颜色 */
      text-align: center;
      border-radius: 5px;             /* 圆角效果 */
      cursor: pointer;                /* 鼠标悬停时显示点击效果 */
  }
  
  .submit:hover {
      background-color: #e44b00;      /* 鼠标悬停时按钮颜色变化 */
  }
  /* 设置导航链接（a）的字体大小 */

/* 基本样式 */
body {
    font-family: Arial, sans-serif;
    background-image: url('../三创/images/bj.png');
}

ul {
    list-style-type: none;
    padding: 0;
}

a {
    text-decoration: none;
    color: #007bff;
}

/* 弹窗背景 */
.popup {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

/* 弹窗内容 */
.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    width: 50%;
    max-width: 500px;
    border-radius: 8px;
    position: relative;
}

/* 关闭按钮 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #aaa;
    cursor: pointer;
}

/* 地址列表 */
#address-list {
    list-style-type: none;
    padding: 0;
}

.address-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.address-item input {
    margin-right: 10px;
}

.address-item button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

button[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

/* 修改已添加的地址标题的字体颜色为黑色 */
label {
    color: black;
}

/* 表单的布局样式 */
form {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}

/* 每个表单元素都分行显示 */
form label, form input, form textarea, form button {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

form input, form textarea {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    width: auto;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-top: 10px;
}

/* 地址列表项的样式 */
.address-item input {
    margin-right: 10px;
}


</style>
<body>
  <!-- 头部 -->
  <header id="header">
    <!-- 头部  公共的 -->
<header id="header">
  <!-- 头,顶部 start -->
  <div class="header">
    <div class="center">
      <div class="left">
        <a href="../三创/announcement.html">
          因事件（台风、特大暴雨）影响，部分地区无法配送公告
        </a>
      </div>
      <div class="right">
        <ul>
          <li id="isLogin">
            <!-- 登录状态将在此处动态显示 -->
          </li>
                 
          <li><a href="../三创/order.html" target="_blank">我的订单</a></li>
          <li><a href="../三创/vip.html" target="_blank">会员</a></li>
          <li><a href="javascript:void(0)" onclick="openAddressPopup()">收货信息</a></li>
           <!-- 弹窗 -->
    <div id="address-popup" class="popup">
      <div class="popup-content">
          <span class="close-btn" onclick="closeAddressPopup()">&times;</span>
          <h3>填写收货信息</h3>
          
          <!-- 填写地址表单 -->
          <form id="address-form">
              <label for="name">姓名：</label>
              <input type="text" id="name" name="name" required>
              
              <label for="phone">手机号码：</label>
              <input type="tel" id="phone" name="phone" required>
              
              <label for="address">详细地址：</label>
              <textarea id="address" name="address" required></textarea>
              
              <button type="submit">添加地址</button>
          </form>

          <hr>
          <h3>已添加的地址：</h3>
          <ul id="address-list">
              <!-- 动态生成地址列表 -->
          </ul>
      </div>
  </div>
          <li class="dropMeun">
            <a href="javascript:void(0)" class="iconfont">客户服务</a>
            <ul>
              <li><a href="javascript:void(0)" id="openChatLink">在线客服</a></li>
              <li><a href="../三创/cooperation.html">商务合作</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
   <!-- 客服聊天框 -->
   <div id="chatbox" class="chatbox">
    <div class="chatbox-header">
        <h4>在线客服</h4>
        <button id="closeChat" class="close-chat-btn">×</button>
    </div>
    <div id="chatbox-messages" class="chatbox-messages">
        <!-- 消息内容 -->
    </div>
    <div class="chatbox-input">
        <input type="text" id="userMessage" placeholder="请输入您的问题..." />
        <button id="sendMessage" class="send-btn">发送</button>
    </div>
  </div>
  <style>/* 客服聊天框样式 */
    .chatbox {
        position: fixed;
        bottom: 10px;
        right: 10px;
        width: 300px;
        height: 400px;
        border: 1px solid #ccc;
        background-color: white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: none; /* 初始状态隐藏 */
        flex-direction: column;
    }
    
    .chatbox-header {
        background-color: #0e578b;
        color: white;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .chatbox-messages {
        flex: 1;
        padding: 10px;
        overflow-y: auto;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
    }
    
    .chatbox-input {
        display: flex;
        padding: 10px;
        border-top: 1px solid #ccc;
    }
    
    .chatbox-input input {
        flex: 1;
        padding: 8px;
        border-radius: 4px;
        border: 1px solid #ccc;
        font-size: 14px;
    }
    
    .chatbox-input button {
        background-color: #0e578b;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .chatbox-input button:hover {
        background-color: #467393;
    }
    
    .close-chat-btn {
        background: none;
        color: white;
        border: none;
        font-size: 18px;
        cursor: pointer;
    }

    /* 消息样式 */
.chatbox .message {
  margin-bottom: 10px;
}

.chatbox .message strong {
  color: #0e578b;
}

.chatbox .message:nth-child(odd) {
  background-color: #f0f8ff;
  padding: 5px;
  border-radius: 5px;
}

.chatbox .message:nth-child(even) {
  background-color: #e5e5e5;
  padding: 5px;
  border-radius: 5px;
}

/* 用户消息 */
.chatbox .message:first-child {
  text-align: left;
}

/* 客服消息 */
.chatbox .message:last-child {
  text-align: right;
}

    </style>
<script>
document.addEventListener("DOMContentLoaded", function () {
  const chatbox = document.getElementById('chatbox');
  const closeChat = document.getElementById('closeChat');
  const sendMessageBtn = document.getElementById('sendMessage');
  const userMessageInput = document.getElementById('userMessage');
  const chatboxMessages = document.getElementById('chatbox-messages');
  const openChatLink = document.getElementById('openChatLink');  // 获取"在线客服"链接

  // 打开聊天框
  function openChatbox() {
    chatbox.style.display = 'flex';
  }

  // 关闭聊天框
  closeChat.addEventListener('click', function () {
    chatbox.style.display = 'none';
  });

  // 发送消息
  sendMessageBtn.addEventListener('click', function () {
    const userMessage = userMessageInput.value.trim();
    if (userMessage) {
      // 显示用户的消息
      addMessageToChatbox('用户', userMessage);

      // 清空输入框
      userMessageInput.value = '';

      // 模拟客服回复
      simulateCustomerServiceReply(userMessage);
    }
  });

  // 向聊天框中添加消息
  function addMessageToChatbox(sender, message) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message');
    messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
    chatboxMessages.appendChild(messageElement);

    // 自动滚动到底部
    chatboxMessages.scrollTop = chatboxMessages.scrollHeight;
  }

  // 模拟客服回复的函数
  function simulateCustomerServiceReply(userMessage) {
    let fixedReply = ''; // 默认的客服回复

    // 根据用户输入的内容做不同的判断
    if (userMessage.includes('你好') || userMessage.includes('您好')) {
      fixedReply = '您好！欢迎来到五邑臻选。有什么我可以帮助您的吗？';
    } else if (userMessage.includes('商品') || userMessage.includes('价格')) {
      fixedReply = '您可以通过我们的产品分类来查看所有商品，或者直接告诉我您想要的商品名称。';
    } else if (userMessage.includes('退货') || userMessage.includes('退款')) {
      fixedReply = '如果您需要退货或退款，请提供订单号，我会帮您处理。';
    } else if (userMessage.includes('物流') || userMessage.includes('快递')) {
      fixedReply = '请提供您的订单号，我会帮您查询物流信息。';
    } else if (userMessage.includes('优惠') || userMessage.includes('折扣')) {
      fixedReply = '我们目前有一些促销活动，您可以查看“限时折扣”板块，享受优惠价格。';
    } else {
      fixedReply = '您好！感谢您的提问。我们已经收到您的问题，会尽快处理。';
    }

    // 模拟客服回复（延迟1秒）
    setTimeout(function () {
      addMessageToChatbox('客服', fixedReply);
    }, 1000);
  }

  // 点击"在线客服"链接时打开聊天框
  openChatLink.addEventListener('click', function () {
    openChatbox();
  });
});
</script>
  <!-- 头,顶部 end -->

    <!-- 头, 搜索区域 start -->
    <div class="search">
      <div class="center">
        <div class="logo">
          <a href="#">五邑臻选</a>
        </div>
        <div class="search-btn">
          <div class="top">
            <input type="text" autocomplete="off" maxlength="100">
            <span>搜索</span>
            <i></i>
          </div>
          <div class="bottom">
            <a href="#">台山咸虾酱</a>
            <a href="#">广合腐乳</a>
          </div>
        </div>
        <a class="cart" href="../三创/cart.html">
          <i class="gwc"></i>
          <span class="text">购物车</span>
          <!-- <i class="circle">0</i> -->
        </a>
        <a class="collect" href="./collect.html">
          <i class="gwc"></i>
          <span class="text">收藏</span>
          <!-- <i class="circle">0</i> -->
        </a>
      </div>
    </div>

  </header>


  <!-- 购物车结算 -->
  <div class="m-cart">
    <div class="center">
      <div class="c-detail">
        <ul>
          <li>
            <div class="w1">
              <input type="checkbox">
              <span>全选</span>
            </div>
            <div class="w2">
              商品信息
            </div>
            <div class="w3">
              单价
            </div>
            <div class="w4">
              数量
            </div>
            <div class="w5">
              小计
            </div>
            <div class="w6">
              操作
            </div>
          </li>
        </ul>
      </div>
      <div class="cart-total">
        <ul>
          <li>
            <div class="w1">
              <div class="box1">
                <!-- <input type="checkbox"> -->
                <span></span>
                <span></span>
              </div>
              <div class="box2">
                <a href="#"></a>
                <!-- <a href="#">清空失效商品</a> -->
              </div>
            </div>
            <div class="w2">
              <div class="info">
                <p>
                  <span>商品合计:</span>
                  <span clas="zje" id="zje">¥0.00</span>
                </p>
                <p>
                  <span>会员优惠(95折):</span>
                  <span class="dz">-¥0.00</span>
                </p>
              </div>
              <div class="total">
                <p>
                  <span>应付总额：</span>
                  <span class="yfje">¥ 0.00</span>
                </p>
                <a href="#">抓紧下单,别磨蹭了.</a>
              </div>
              <a href="javascript:" class="submit">下单</a>
            </div>

          </li>
        </ul>
      </div>
    </div>
  </div>




  <!-- 底部 -->
    <footer>
    <div class="center">
      <div class="yx-cp-m-ft1">
        <div class="yx-cp-item">
          <h4>客服服务</h4>
          <div class="btn">
            <a>
              <i></i>
              <span>在线客服</span>
            </a>
            <a>
              <i></i>
              <span>用户反馈</span>
            </a>
          </div>
        </div>
        <div class="yx-cp-item">
          <h4>何为五邑臻选</h4>
          <p>
            五邑臻选”通常指的是来自中国广东省珠江三角洲五邑地区的特色优质产品。这些产品经过严格筛选，代表了五邑地区的特色和优势。
            五邑地区包括 江门市 及其周边的五个主要区域：新会、台山 、 开平、恩平和鹤山，这个区域有着丰富的文化和自然资源，生产了许多在广东乃至全国都具有知名度的特色产品
          </p>
          <div class="ewm">
            <span>关注我们 :</span>
            <i></i>
            <i></i>
            <i></i>
          </div>
        </div>
        <div class="yx-cp-item">
          <h4>关注微信公众号“五邑臻选”</h4>
          <div><a href="#"><img src="./images/二维码.png" alt="" style="width: 150px; height: auto;"></a></div>
          <p>每日最新资讯</p>
      </div>
      
      
      </div>
      <div class="yx-cp-m-ft2"></div>
    </div>
  </footer>

  <script src="./js/cart.js"></script>
  <script src="./js/common.js"></script>
  
  <script>
    // 打开收货地址弹窗
    function openAddressPopup() {
        document.getElementById("address-popup").style.display = "block";
    }
    
    // 关闭收货地址弹窗
    function closeAddressPopup() {
        document.getElementById("address-popup").style.display = "none";
    }
    
    // 处理地址表单提交
    document.getElementById("address-form").addEventListener("submit", function(event) {
        event.preventDefault();
        
        // 获取表单数据
        const name = document.getElementById("name").value;
        const phone = document.getElementById("phone").value;
        const address = document.getElementById("address").value;
        
        // 创建地址对象
        const newAddress = {
            name: name,
            phone: phone,
            address: address
        };
        
        // 获取当前保存的地址列表
        let addressList = JSON.parse(localStorage.getItem("addresses")) || [];
        
        // 将新地址添加到地址列表中
        addressList.push(newAddress);
        
        // 更新 localStorage
        localStorage.setItem("addresses", JSON.stringify(addressList));
        
        // 渲染地址列表
        renderAddressList();
        
        // 清空表单
        document.getElementById("address-form").reset();
    });
    
    // 渲染地址列表
    function renderAddressList() {
        const addressList = JSON.parse(localStorage.getItem("addresses")) || [];
        const addressListContainer = document.getElementById("address-list");
        addressListContainer.innerHTML = "";  // 清空当前列表
        
        addressList.forEach((address, index) => {
            const listItem = document.createElement("li");
            listItem.classList.add("address-item");
            listItem.innerHTML = `
                <label>
                    <input type="radio" name="default-address"> ${address.name} (${address.phone}) - ${address.address}
                </label>
                <button onclick="deleteAddress(${index})">删除</button>
            `;
            
            addressListContainer.appendChild(listItem);
        });
    }
    
    // 删除地址
    function deleteAddress(index) {
        // 获取当前保存的地址列表
        let addressList = JSON.parse(localStorage.getItem("addresses")) || [];
        
        // 删除指定索引的地址
        addressList.splice(index, 1);
        
        // 更新 localStorage
        localStorage.setItem("addresses", JSON.stringify(addressList));
        
        // 渲染更新后的地址列表
        renderAddressList();
    }
    
    // 页面加载时加载存储的地址列表
    window.onload = function() {
        renderAddressList();
    };
    
        </script>
</body>

</html>